<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>团购</title>
    <link rel="stylesheet" href="../plugins/bootstrap/css/bootstrap.min.css"/>
    <link rel="stylesheet" href="../css/groupbuy.css"/>
    <script src="../plugins/jquery/jquery-3.4.1.js"></script>
    <script src="../plugins/bootstrap/js/bootstrap.min.js"></script>
</head>
<body>

导航栏

<div class="container" style="margin-top: 30px">

    <!-- 搜索框 -->
    <div class="row">
        <div class="col-md-3">
            <div class="log">
                <img src="../images/360kad.jpg" alt="图片加载失败"/>
            </div>
        </div>
        <div class="col-md-6" style="padding: 0;margin-top: 15px">
            <form class="bs-example bs-example-form" role="form">
                <div class="input-group">
                    <input type="text" class="form-control" placeholder="请输入商品名称">
                    <span class="input-group-btn">
                            <button class="btn btn-primary" type="button">搜索</button>
                        </span>
                </div>
            </form>
        </div>
    </div>
</div>

<div class="container-fluid" style="margin-top: 30px">
    <div class="row">
        <img src="../images/拼团大图.jpg" alt="图片加载失败">
    </div>
</div>

<div id="mygroup">
    <input type="button" class="btn btn-lg btn-primary" value="我的团购" style="float: right;margin-top: 10px" data-toggle="modal" data-target="#myModal3">
</div>

<div class="container-fluid" style="background-color: #F0F0F0">
    <div class="container" style="margin-top: 50px">
        <div class="row">
            <ul class="goodshow">
                <li class="col-md-6">
                    <div class="good">
                        <div class="goodimg">
                            <a href="">
                                <img src="../images/商品图.jpg" alt="图片加载失败">
                            </a>
                        </div>
                        <div class="goodinfo">
                            <p class="goodname">洁悠神 长效抗菌材料 喷雾型 30ml</p>
                            <p class="gooddetail">杀灭细菌和真菌，巩固皮肤抗菌防线。见效快</p>
                            <p class="groupgoodprice">￥39.90</p>
                            <p class="goodprice">￥68.00</p>
                            <input type="button" class="btn-lg group" value="开团" data-toggle="modal" data-id="1" data-target="#myModal">
<!--                            <input type="button" class="btn-lg group" value="开团" onclick="showModal()">-->
                            <p>
                            <p class="icon"><img src="../images/拼团icon.png" alt=""><span>2人团</span></p>
                            <p class="sale">已售144</p>
                            </p>
                        </div>
                    </div>
                </li>

                <li class="col-md-6">
                    <div class="good">
                        <div class="goodimg">
                            <a href="">
                                <img src="../images/商品图.jpg" alt="图片加载失败">
                            </a>
                        </div>
                        <div class="goodinfo">
                            <p class="goodname">洁悠神 长效抗菌材料 喷雾型 30ml</p>
                            <p class="gooddetail">杀灭细菌和真菌，巩固皮肤抗菌防线。见效快</p>
                            <p class="groupgoodprice">￥39.90</p>
                            <p class="goodprice">￥68.00</p>
                            <input type="button" class="btn-lg  group" value="开团">
                            <p>
                            <p class="icon"><img src="../images/拼团icon.png" alt=""><span>2人团</span></p>
                            <p class="sale">已售144</p>
                            </p>
                        </div>
                    </div>
                </li>


            </ul>
        </div>
    </div>


    <div class="container" style="margin-top: 30px">
        <div style="text-align: center" id="page">
            <nav aria-label="Page navigation">
                <ul class="pagination">
                    <li>
                        <a href="#" aria-label="Previous">
                            <span aria-hidden="true">&laquo;</span>
                        </a>
                    </li>
                    <li><a href="#">1</a></li>
                    <li><a href="#">2</a></li>
                    <li><a href="#">3</a></li>
                    <li><a href="#">4</a></li>
                    <li><a href="#">5</a></li>
                    <li>
                        <a href="#" aria-label="Next">
                            <span aria-hidden="true">&raquo;</span>
                        </a>
                    </li>
                </ul>
            </nav>
        </div>
    </div>
</div>


<!-- 模态框（Modal） -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" style="margin-top: 80px">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                <h4 class="modal-title" id="myModalLabel">拼单详情</h4>
            </div>
            <div class="modal-body">
                <p style="font-size: large">正在拼单中</p>
                <div class="groupsmember" style="height: 150px;overflow: auto">
                    <table class="table">
<!--                        <caption>正在拼单中</caption>-->
                        <tbody>
<!--                            <tr>-->
<!--                                <td style="text-align: center;font-size: large">该商品暂时无人拼单哦，快去发起拼单吧</td>-->
<!--                            </tr>-->
                            <tr>
                                <td style="text-align: center;display:table-cell; vertical-align:middle">头像</td>
                                <td style="text-align: center;display:table-cell; vertical-align:middle">用户名</td>
                                <td style="text-align: center;display:table-cell; vertical-align:middle">还差x人</td>
                                <td style="text-align: center;display:table-cell; vertical-align:middle">剩余时间</td>
                                <td style="text-align: center;display:table-cell; vertical-align:middle"><input type="button" class="btn btn-danger" value="去拼单" onclick="showModal2()"></td>
                            </tr>
                        </tbody>
                    </table>
                </div>
                <div class="groupsponsor" style="margin-top: 20px">
                    <p style="font-size: large">发起拼单</p>
                    <table class="table">
                        <tbody>
                        <tr>
                            <td>
                                <input type="button" class="btn btn-warning" value="发起拼单">
                            </td>
                        </tr>
                        </tbody>
                    </table>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-primary" data-dismiss="modal">关闭</button>
<!--                <button type="button" class="btn btn-primary">提交更改</button>-->
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal -->
</div>


<!-- 模态框（Modal） -->
<div class="modal fade" id="myModal2" tabindex="-1" role="dialog" aria-labelledby="myModalLabel2" aria-hidden="true" style="margin-top: 120px">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×
                </button>
                <h4 class="modal-title" id="myModalLabel2">参与拼单</h4>
            </div>
            <div class="modal-body">
                <div class="groupdetail" style="text-align: center">
                    <p>参与<b>admin</b>的拼单</p>
                    <p>仅剩<span style="color: red">1</span>个名额，xxx后结束</p>
                    <div style="display: inline-block">
                        <div class="pinzhu">拼主</div>
                        <div class="groupimg">
                            <img src="../images/收藏.png" alt="图片加载失败">
                        </div>
                        <div class="groupimg">
                            <img src="../images/问号.png" alt="图片加载失败">
                        </div>
                        <div class="groupimg">
                            <img src="../images/问号.png" alt="图片加载失败">
                        </div>
                    </div>
                    <div id="groupmembername">
                        <div class="username">
                            adminadminadminadminadmin
                        </div>
                        <div class="username">
                            admin
                        </div>
                        <div class="username">
                        </div>

                    </div>
                    <p>
                        <input type="button" class="btn btn-danger btn-lg" value="参与拼单">
                    </p>

                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
<!--                <button type="button" class="btn btn-primary">提交更改</button>-->
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal-dialog -->
</div><!-- /.modal -->


<!-- 模态框（Modal） -->
<div class="modal fade" id="myModal3" tabindex="-1" role="dialog" aria-labelledby="myModalLabel3" aria-hidden="true" style="margin-top: 60px">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×
                </button>
                <h4 class="modal-title" id="myModalLabel3">我的团购</h4>
            </div>
            <div class="modal-body">
                <div>
                    <ul id="myTab" class="nav nav-tabs">
                        <li class="active">
                            <a href="#groupsuccess" data-toggle="tab">拼团成功</a>
                        </li>
                        <li>
                            <a href="#grouping" data-toggle="tab">正在拼团中</a>
                        </li>
                        <li>
                            <a href="#groupfail" data-toggle="tab">拼团失败</a>
                        </li>
                    </ul>
                    <div id="myTabContent" class="tab-content" style="height: 300px;overflow: auto">
                        <div class="tab-pane fade in active" id="groupsuccess">
                            <table class="table">
                                <tbody id="mygroupinfo">

                                    <tr>
                                        <td style="text-align: center;display:table-cell; vertical-align:middle;font-size: large">当前暂无成功拼团</td>
                                    </tr>


                                    <tr>
                                        <td style="text-align: center;display:table-cell; vertical-align:middle">
                                            1
                                        </td>
                                        <td style="text-align: center;display:table-cell; vertical-align:middle">
                                            <img src="../images/商品图.jpg" alt="图片加载失败" style="width: 60px;height: 60px">
                                            <div>口罩</div>
                                        </td>
                                        <td style="text-align: center;display:table-cell; vertical-align:middle">
                                            <div style="display: inline-block;position: relative;background-color: red">
                                                <div class="pinzhu">拼主</div>
                                                <div class="groupimg">
                                                    <img src="../images/收藏.png" alt="图片加载失败">
                                                    <div>admin</div>
                                                </div>
                                                <div class="groupimg">
                                                    <img src="../images/问号.png" alt="图片加载失败">
                                                    <div>&nbsp;</div>
                                                </div>


                                            </div>
                                        </td>
                                        <td style="text-align: center;display:table-cell; vertical-align:middle">
                                            <input type="button" class="btn btn-danger" value="去支付">
                                        </td>
                                    </tr>


                                    <tr>
                                        <td style="text-align: center;display:table-cell; vertical-align:middle">
                                            1
                                        </td>
                                        <td style="text-align: center;display:table-cell; vertical-align:middle">
                                            <img src="../images/商品图.jpg" alt="图片加载失败" style="width: 60px;height: 60px">
                                            <div>口罩</div>
                                        </td>
                                        <td style="text-align: center;display:table-cell; vertical-align:middle">
                                            <div style="display: inline-block;position: relative;background-color: red">
                                                <div class="pinzhu">拼主</div>
                                                <div class="groupimg">
                                                    <img src="../images/收藏.png" alt="图片加载失败">
                                                    <div>admin</div>
                                                </div>
                                                <div class="groupimg">
                                                    <img src="../images/问号.png" alt="图片加载失败">
                                                    <div>&nbsp;</div>
                                                </div>
                                                <div class="groupimg">
                                                    <img src="../images/问号.png" alt="图片加载失败">
                                                    <div>&nbsp;</div>
                                                </div>
                                                <div class="groupimg">
                                                    <img src="../images/问号.png" alt="图片加载失败">
                                                    <div>&nbsp;</div>
                                                </div>


                                            </div>
                                        </td>
                                        <td style="text-align: center;display:table-cell; vertical-align:middle">
                                            <input type="button" class="btn btn-danger" value="去支付" disabled>
                                        </td>
                                    </tr>


                                </tbody>
                            </table>
                        </div>
                        <div class="tab-pane fade" id="grouping">
                            ing
                        </div>
                        <div class="tab-pane fade" id="groupfail">
                            失败
                        </div>
                    </div>

                </div>


            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-primary" data-dismiss="modal">关闭</button>
                <!--                <button type="button" class="btn btn-primary">提交更改</button>-->
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal-dialog -->
</div><!-- /.modal -->




底部导航

<script>
    // $('#myModal3').on('show.bs.modal',function () {
    //     $('#mygroupinfo').html('大师牛逼')
    // })
</script>

<script>
    function showModal2(){
        $('#myModal2').modal('show')
    }

    $('#myModal2').on('show.bs.modal',function () {
        $('.groupdetail').append('')
    })

</script>
<script>
    $('#myModal').on('show.bs.modal', function (event) {
        //btn 触发元素，按钮
        var btn = $(event.relatedTarget)
        var id = btn.data("id")

        $(".grouplist").append("<tr><td>" + id + "</td></tr>");
        // $.ajax({
        //     url:,
        //     data:,
        //     dataType:,
        //     success:function () {
        //
        //     }
        // })
    })
</script>



</body>
</html>